<template>
    <div class="books subpage" v-if="detailsBook">
       <My-head :title="$route.query.name" tclass='thead'>
            <img :src="require('@/assets/back.png')" alt="" class="goback">
       </My-head>
       <div>
           <img class="bo-img" :src="'https://img.welan.com/s/'+detailsBook.imgs[0].imageUrl" alt="">
       </div>
       <div class="bo-two">
           <p class="bo-title"> {{ detailsBook.products.name }} </p>
           <p class="bo-author">
               <span>
                   作者: 
               </span>
               <span class="bo-author-name">
                    {{ detailsBook.authorName }} 
               </span>
            </p>
            <p class="bo-author">
               <span>
                   出版社: 
               </span>
               <span class="bo-author-name">
                    {{ detailsBook.pressName ? detailsBook.pressName : '不详' }} 
               </span>
            </p>
            <p class="bo-price">
                <span class="bo-money">
                    ￥
                </span>
               <span class="bo-wlPrice">
                    {{ (detailsBook.sku.wlPrice).toFixed(2) }} 
               </span>
               <span class="bo-discount"> ({{ (detailsBook.discount / 10).toFixed(1) }}折)</span>
            </p>
            <p class="bo-start">
               <span>
                   定价: 
               </span>
               <span class="bo-sku-price">
                    ￥{{ (detailsBook.sku.price).toFixed(2) }} 
               </span>
            </p>
       </div>

       <div class="bo-four">
           <p class="bo-xin">出版信息</p>
           <ul>
               <li>
                   <p class="bo-left">书名:</p>
                   <p class="bo-right"> {{ detailsBook.products.name }} </p>
               </li>
               <li>
                   <p class="bo-left">ISBN:</p>
                   <p class="bo-right"> {{ detailsBook.products.barcode }} </p>
               </li>
               <li>
                   <p class="bo-left">作者:</p>
                   <p class="bo-right"> {{ detailsBook.authorName }} </p>
               </li>
               <li>
                   <p class="bo-left">出版社:</p>
                   <p class="bo-right"> {{ detailsBook.pressName ? detailsBook.pressName : '不详' }} </p>
               </li>
               <li>
                   <p class="bo-left">出版时间:</p>
                   <p class="bo-right"> {{ detailsBook.publishedDate }} </p>
               </li>
               <li>
                   <p class="bo-left">开本:</p>
                   <p class="bo-right"> {{ detailsBook.format }} </p>
               </li>
               <li>
                   <p class="bo-left">包装:</p>
                   <p class="bo-right"> {{ detailsBook.bookBinding }} </p>
               </li>
           </ul>
       </div>

       <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="评论" dot />
            <van-goods-action-icon icon="good-job-o" @click="praiseAction" text="点赞" color="red" :badge="praiseCount" />
            <van-goods-action-icon icon="cart-o" @click="gotopage('cart')" text="购物车" :badge="cartCount" color="red"/>
            <van-goods-action-icon icon="shop-o" text="收藏" @click="collectAction" :badge="collectCount" color="red"/>
            <van-goods-action-button type="warning" text="加入购物车" @click="cartAction"/>
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detailsBook: null,
            skuId: this.$route.params.skuId,
            bookName: this.$route.query.name,
            // bookImg: this.$route.query.img,
            // bookPrice: this.$route.query.wl_price,
            imgs:null,
            pressName: true,
            praiseCount: 0,
            cartCount: 0,
            collectCount: 0,
            bookImg: 0,
            bookPrice: 0,
            bookNumber: 1
        }
    },
    methods: {
        getBookDetails() {
            this.$ajax.getDetails({
                skuId: this.skuId
            }).then((res) => {
                console.log(res);
                this.detailsBook = res
                // console.log(res.imgs[0].imageUrl);
                this.bookImg = res.imgs[0].imageUrl
                this.bookPrice = res.sku.wlPrice
            });
        },
        getPraiseCount() {
            // 获取所有点赞的次数
            this.$ajax.getPraiseOne({
                skuId: this.skuId
            })
            .then(res => {
                // this.praiseCount = res.length
                if(res.length > 0) {
                    this.praiseCount = res.length
                } else {
                    this.praiseCount = ''
                }
            })
        },
        getCartCount() {
            // 获取所有购物车件数
            this.$ajax.getCartOne({
                skuId: this.skuId
            })
            .then(res => {
                console.log(res);
                // this.cartCount = res[0].bookNumber
                if(res.length > 0) {
                    this.cartCount = res[0].bookNumber
                } else {
                    this.cartCount = ''
                }
            })
        },
        getCollectCount() {
            // 获取所有购物车件数
            this.$ajax.getCollectOne({
                skuId: this.skuId
            })
            .then(res => {
                // this.collectCount = res.length
                if(res.length > 0) {
                    this.collectCount = res.length
                } else {
                    this.collectCount = ''
                }
            })
        },
        checkIsLogin(callback) {  // 点赞，先检查用户是否登录
            if(this.userInfo){
                callback()
            } else {
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '你还没有登录,请先登录吧!',
                }).then(() => {
                    // on close
                    this.$router.push({ name: 'login' })
                })
                   .catch( err => {
                })
            }
        },
        praiseAction() {
            // 先查询 
            // 已经点赞就取消点赞
            // 如果没有就直接点赞
            //  {gid,username,id,phone,good}  
            this.checkIsLogin(() => {
                this.$ajax.getPraiseOne({
                    skuId: this.skuId,
                    phone: this.userInfo.phone
                })
                .then(res => {
                    if(res.length > 0) {
                        // 删除 
                        // id 不是skuId 带这条记录的id 
                        this.$ajax.removePraiseOne(res[0].id)
                        .then(data => {
                            this.getPraiseCount()
                            //  this.$toast('你取消了点赞') // 有问题
                            this.showSuccessMsg('你取消了点赞')
                        })
                    } else {
                        // 添加
                        this.$ajax.addPraiseOne({
                            skuId: this.skuId,
                            bookName: this.bookName,
                            bookImg: this.bookImg,
                            bookPrice: this.bookPrice,
                            bookNumber: this.bookNumber,
                            phone: this.userInfo.phone,
                            username: this.userInfo.username,
                        })
                        .then(result => {
                            this.getPraiseCount()
                            this.showSuccessMsg('点赞成功')
                            // this.$toast('点赞成功')
                        })
                    }
                })
            })
        },
        cartAction() {
            // 先查询是否登录
            this.checkIsLogin(() => {
                this.$ajax.getCartOne({
                    skuId: this.skuId,
                    phone: this.userInfo.phone
                })
                .then(res => {
                    if(res.length > 0) {
                        // 删除 
                        // id 不是skuId 带这条记录的id 
                        this.$ajax.updateBookNumber(res[0].id, {
                            bookNumber: res[0].bookNumber+1,
                        })
                        .then(data => {
                            this.getCartCount()
                            //  this.$toast('你取消了点赞') // 有问题
                            this.showSuccessMsg('加入购物车成功')
                        })
                    } else {
                        // 添加
                        this.$ajax.addCartOne({
                            skuId: this.skuId,
                            bookName: this.bookName,
                            bookImg: this.bookImg,
                            bookPrice: this.bookPrice,
                            bookNumber: this.bookNumber,
                            phone: this.userInfo.phone,
                            username: this.userInfo.username,
                        })
                        .then(result => {
                            
                            this.getCartCount()
                            this.showSuccessMsg('加入购物车成功')
                            // this.$toast('点赞成功')
                        })
                    }
                })
            })
        },
        collectAction() {
            // 先查询 
            // 已经加入收藏取消就收藏
            // 如果没有就直接收藏  
            this.checkIsLogin(() => {
                this.$ajax.getCollectOne({
                    skuId: this.skuId,
                    phone: this.userInfo.phone
                })
                .then(res => {
                    if(res.length > 0) {
                        // 删除 
                        // id 不是skuId 带这条记录的id 
                        this.$ajax.removeCollectOne(res[0].id)
                        .then(data => {
                            this.getCollectCount()
                            //  this.$toast('你取消了点赞') // 有问题
                            this.showSuccessMsg('你取消了收藏')
                        })
                    } else {
                        // 添加
                        this.$ajax.addCollectOne({
                            skuId: this.skuId,
                            bookName: this.bookName,
                            bookImg: this.bookImg,
                            bookPrice: this.bookPrice,
                            bookNumber: this.bookNumber,
                            phone: this.userInfo.phone,
                            username: this.userInfo.username,
                        })
                        .then(result => {
                            this.getCollectCount()
                            this.showSuccessMsg('收藏成功')
                            // this.$toast('点赞成功')
                        })
                    }
                })
            })
        },
    },
    mounted() {
        this.getBookDetails(),
        this.getPraiseCount(),
        this.getCartCount(),
        this.getCollectCount()
  },
}
</script>

<style lang="scss">
.books{
  position: relative;
  .thead{
    background: transparent !important;
    border-color:transparent !important;
  }
  .goback{
    width:25px;
    height:25px;
  }
  .bo-img {
      width: 100%;
      height: 100%;
  }
  .bo-two {
      margin-bottom: 2.667vw;
      padding: 2.667vw;
      .bo-title {
            padding-top: 2.667vw;
            color: #1a202c;
            font-weight: 700;
            font-size: 16px;
      }
      .bo-author {
            padding-top: 2.667vw;
            .bo-author-name {
                color: rgb(25, 137, 250);
            }
      }
      .bo-price {
           padding-top: 2.667vw;
           .bo-money {
               color: red;
               font-size: 16px;
           }
          .bo-wlPrice {
              color: red;
              font-size: 22px;
          }
          .bo-discount {
              color: #cbd5e0;
          }
      }
      .bo-start {
          padding-top: 2.667vw;
          color: #cbd5e0;
          .bo-sku-price {
              text-decoration: line-through;
          }
      }
  }

  .bo-four {
      .bo-xin {
          padding: 2.667vw;
      }
      ul {
          padding: 4.267vw 10.667vw;
          li {
              display: flex;
              margin: 4vw 0;
              font-size: 14px;
              .bo-left {
                width: 21.333vw;
                color: #a0aec0;
                flex-shrink: 0;
              }
          }
      }
  }
}
</style>